<template>
  <div>

    <el-form ref="form" :inline="true" :model="form" label-width="80px">

          <el-form-item  label="车辆名称:">
            <el-input v-model="form.name" placeholder="车辆名称" clearable></el-input>
          </el-form-item>


          <el-form-item   label="车辆载重:">
            <el-input v-model="form.allowableLoad" placeholder="车辆载重" clearable></el-input>
          </el-form-item>


          <el-form-item  label="车型体积:">
            <el-input v-model="form.allowableVolume" placeholder="车型体积" clearable></el-input>
          </el-form-item>


      <el-row>
        <el-col :span="3">
          <div class="grid-content bg-purple">
            <el-button
              type="danger" @click="getDataList">搜索
            </el-button>

          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-light">
            <el-button @click="pickupresetdateform('form')">重置</el-button>
          </div>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="3">
          <div class="grid-content bg-purple">
            <el-button
              type="primary" @click="init">增加车型
            </el-button>
          </div>
        </el-col>
      </el-row>

    </el-form>


    <el-table :data="dataList"
              stripe
              style="width: 100%">
      <el-table-column
        prop="id"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="车型名称">
      </el-table-column>
      <el-table-column
        prop="allowableLoad"
        label="准载重量">
      </el-table-column>
      <el-table-column
        prop="allowableVolume"
        label="准载体积">
      </el-table-column>
      <el-table-column
        prop="measureLong"
        label="长">
      </el-table-column>
      <el-table-column
        prop="measureWidth"
        label="宽">
      </el-table-column>
      <el-table-column
        prop="measureHigh"
        label="高">
      </el-table-column>
      <el-table-column
        prop="truckEntities"
        label="适用货品类型">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" size="small" type="danger"
          >禁用
          </el-tag
          >
          <el-tag v-else size="small">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="querybyId(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="deleteCars(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :visible.sync="UpdateVisible"
               :close-on-click-modal="false">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm"
               @keyup.enter.native="dataFormSubmit()" label-width="80px">
        <el-form-item label="车辆类型名称" prop="name">
          <el-input v-model="dataForm.name" placeholder="车辆类型名称"></el-input>
        </el-form-item>
        <el-form-item label="准载重量" prop="allowableLoad">
          <el-input v-model="dataForm.allowableLoad" placeholder="准载重量"></el-input>
        </el-form-item>
        <el-form-item label="准载体积" prop="allowableVolume">
          <el-input v-model="dataForm.allowableVolume" placeholder="准载体积"></el-input>
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input v-model="dataForm.measureLong" placeholder="长"></el-input>
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input v-model="dataForm.measureWidth" placeholder="宽"></el-input>
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input v-model="dataForm.measureHigh" placeholder="高"></el-input>
        </el-form-item>
        <el-form-item label="状态 0：禁用 1：正常" prop="status">
          <el-input v-model="dataForm.status" placeholder="状态 0：禁用 1：正常"></el-input>
        </el-form-item>


        <el-select v-model="value1" multiple placeholder="请选择">
          <el-option
            v-for="item in goodsTypeEntities"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>


      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="UpdateVisible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>




export default {
  name: 'carModels',

  methods: {
    pickupresetdateform() {
      this.form.name='',
        this.form.allowableLoad='',
        this.form.allowableVolume=''


      this.getDataList();
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },

    //查询表单数据
    getDataList() {
      let params = {
        'page': this.pageIndex,
        'limit': this.pageSize,

        'name':this.form.name,
        'allowableLoad':this.form.allowableLoad,
        'allowableVolume':this.form.allowableVolume,

      }
      this.$http({
        url: this.$http.adornUrl('/base/trucktype/querytrucktypefy'),
        method: 'get',
        params: this.$http.adornParams(params)

      }).then(res => {
        console.log(res.data.rows)
        this.dataList = res.data.rows
      })

    },
    //查询商品冽表
    queryGoodList() {
      this.$http({
        url: this.$http.adornUrl('/base/goodstype/findgoodstypeAll'),
        method: 'get',
        params: this.$http.adornParams()

      }).then(res => {
        this.goodsTypeEntities = res.data
      })
    },

    querybyId(id) {
      let self = this
       this.queryGoodList()
      this.$http({
        method: 'get',
        url: this.$http.adornUrl('/base/trucktype/findtrucktypeById/' + id)
      }).then(res => {
        self.dataForm.id = res.data.id
        self.dataForm.name = res.data.name
        self.dataForm.allowableLoad = res.data.allowableLoad
        self.dataForm.allowableVolume = res.data.allowableVolume
        self.dataForm.measureLong = res.data.measureLong
        self.dataForm.measureWidth = res.data.measureWidth
        self.dataForm.measureHigh = res.data.measureHigh
        self.dataForm.status = res.data.status
        self.value1 =  res.data.goodsTypes;
        this.UpdateVisible = true
      })

    },
    init() {
      this.$nextTick(() => {
      this.$refs['dataForm'].resetFields()

      })
      this.value1=[]
      this.UpdateVisible = true
      this.queryGoodList()

    },
    deleteCars(id){
      this.$http({
        url: this.$http.adornUrl('/base/trucktype/delecttrucktypebyid/'+id),
        method: 'delete'
      }).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success',
          }
        )
        this.getDataList();
      })

    },

  },
  mounted() {
    this.getDataList()

  },

  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      queryInfo: '',

      UpdateVisible: false,
      AddVisible: false,
      dataList: [],
     /*  name: '',
      allowableLoad: '',
      allowableVolume: '',
      measureLong: '',
      measureWidth: '',
      measureHigh: '',
      status: '', */
      goodsTypeEntities: [],
      value1: [],

      form: {
        name: '',
        allowableLoad: '',
        allowableVolume: '',

      },
      dataForm: {
        id: '',
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '',
        measureWidth: '',
        measureHigh: '',
        status: '',
        goodsTypeEntities: '',
      },
      dataRule: {
        name: [
          {required: true, message: '车辆类型名称不能为空', trigger: 'blur'}
        ],
        allowableLoad: [
          {required: true, message: '准载重量不能为空', trigger: 'blur'}
        ],
        allowableVolume: [
          {required: true, message: '准载体积不能为空', trigger: 'blur'}
        ],
        measureLong: [
          {required: true, message: '长不能为空', trigger: 'blur'}
        ],
        measureWidth: [
          {required: true, message: '宽不能为空', trigger: 'blur'}
        ],
        measureHigh: [
          {required: true, message: '高不能为空', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '状态 0：禁用 1：正常不能为空', trigger: 'blur'}
        ]
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/base/trucktype/${!this.dataForm.id ? 'saveTruckType' :
                'updatetrucktypeById/'}`),
              method: !this.dataForm.id ? 'post' : 'put',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'name': this.dataForm.name,
                'allowableLoad': this.dataForm.allowableLoad,
                'allowableVolume': this.dataForm.allowableVolume,
                'measureLong': this.dataForm.measureLong,
                'measureWidth': this.dataForm.measureWidth,
                'measureHigh': this.dataForm.measureHigh,
                'status': this.dataForm.status,
                "goodsTypes":this.value1,
              })
            }).then(({data}) => {
                this.$message( {type: 'success',
                  message:data.msg
                })
                this.UpdateVisible = false
                this.getDataList()
            })
          }
        })
      }
    }
  },

}
</script>

<style scoped>

</style>
